<template>
  <div>
		<title-bar :title="'余额列表'" />
    <van-list v-model="loading" :finished="finished" :immediate-check="false" :offset="100" @load="loadMore" >
      <van-cell-group>
        <van-cell class="column_panel" style="margin-top: 46px;">
          <div class="column_text">
            <span class="flex_1 text-center">时间</span>
            <span class="flex_1 text-center" @click="show=true">类型
              <van-icon name="wap-nav" class="style_icon" /></span>
            <span class="flex_1">金额</span>
            <span class="flex_1">结余</span>
          </div>
        </van-cell>
      </van-cell-group>
      <div class="row_panel" >
        <van-cell-group v-for="(el, i) in items" :key="i" style="margin-bottom: 5px;">
          <van-cell>
            <div class="row_text" slot="title">
              <span class="flex_1 text-center">{{el.createTime | dateTimeFormat}}</span>
              <span class="flex_1 text-center">{{styleText(el.style)}}</span>
              <span class="flex_1">{{el.money.toFixed(2)}}</span>
              <span class="flex_1">{{el.afteramount.toFixed(2)}}</span>
            </div>
          </van-cell>
          <van-cell>
            <div style="color: gray;">备注：{{el.remark || '无'}}</div>
          </van-cell>
        </van-cell-group>
      </div>
    </van-list>
    <van-popup v-model="show" position="bottom">
        <van-picker show-toolbar title="选择余额类型" :columns="columns" @cancel="onCancel" @confirm="onConfirm" />
    </van-popup>
  </div>
</template>

<script>
import {Picker} from 'vant';
import IsEmpty from "@/vue/components/is-empty/";
import loadMore from '@/vue/mixin/list-load-more';
import scrollFixed from '@/vue/mixin/scroll-fixed';
import TitleBar from '@/vue/components/title-bar/';
import { BALANCE_LIST } from '@/api/user';

const STYLE_TEXT = {
    0: '全部',
    1: '充值',
    2: '扣款',
    3: '提现',
    4: '下单抵扣',
    5: '订单退款',
    6: '消费佣金',
    7: '平推佣金',
    8: '提现退回',
    9: '购买VIP',
    10: '购买VIP推荐奖励',
    11: '单品退款'
};
export default {
  name: 'balance-record',
  mixins: [loadMore, scrollFixed],
  data() {
    return {
        style: null,
        columns: Object.values(STYLE_TEXT),
        show: false
    }
  },
  created() {
    this.resetInit();
  },

  methods: {
    initData() {
      return this.$reqGet(BALANCE_LIST, {
        mid: this.user.id,
        style: this.style,
        offset: (this.pages.currPage - 1) * this.pages.perPage,
        limit: this.pages.perPage
      }, {
        hideLoading: true
      }).then(res => {
        const { rows, total } = res.data.data;
        this.items.push(...rows);
        return {
          pageCount: rows.length,
          totalCount: total
        };
      })
    },

    styleText(style) {
        return STYLE_TEXT[style + 1] || '';
    },
    onConfirm(value, index) {
        this.show = false;
        this.style = index - 1;
        if (index === 0) {
            this.style = null;
        }

        this.resetInit();
    },
    onCancel() {
        this.show = false;
        this.style = null;
    },
  },
  components: {
      [Picker.name]: Picker,
			[TitleBar.name]: TitleBar
  }
}
</script>
<style lang="scss" scoped>
  .hidden {
    overflow: hidden;
  }
.column_panel {
    background-color: $green;
    position: fixed;
    top: 0;
    z-index: 11;
}
.column_text {
    display: flex;
    text-align: right;
    color: white;
}

.row_panel {

  margin-top: 90px;

}
.row_text {
    display: flex;
    text-align: right;
}

.style_icon {
    vertical-align: text-bottom;
    margin-left: 2px;
}
</style>


